<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

    <link rel="stylesheet" th:href="@{/css/enter_style.css}">

</head>
<body>

<div class="container right-panel-active">

    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form  class="form" id="form1" name="form1" method="post">
            <h2 class="form__title">注册</h2>
            <input type="text" placeholder="用户名" class="input" name="username" onblur="check()" />
            <div id="div1" style="display:inline"></div>
            <input type="password" placeholder="密码" class="input" name="userpassword" onblur="check()" />
            <div id="div2" style="display:inline"></div>
            <input type="password" placeholder="确认密码" class="input" name="reuserpassword" onblur="check()"/>
            <div id="div3" style="display:inline"></div>
            <div style="color: red" th:text="${msg}" ></div>
<!--            <a th:href="@{/404}">注册</a>-->
            <a  th:href="@{/404_1}"><button class="button btn" type="button">注册</button></a>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form th:action="@{/login}" class="form" id="form2" method="post">
            <h2 class="form__title">登录</h2>
            <input type="text" placeholder="用户名" class="input" name="username"/>
            <input type="password" placeholder="密码" class="input" name="userpassword"/>
            <div style="color: red" th:text="${msg}" ></div>
            <a href="#" class="link">忘记密码?</a>
            <button class="btn" type="submit">登录</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">登录</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>

<script  th:src="@{/js/script.js}"></script>

<script>
    function checkname() {
        var div = document.getElementById("div1");
        div.innerHTML = "";
        var name1 = document.form1.username.value;
        if (name1 == "") {
            div.innerHTML = "姓名不能为空！";
            div.style.color="red";
           // document.form1.user1.focus();
            return false;
        }
        if (name1.length < 4 || name1.length > 16) {
            div.innerHTML = "姓名输入的长度4-16个字符！";
            div.style.color="red";
           // document.form1.user1.select();
            return false;
        }
        var charname1 = name1.toLowerCase();
        for (var i = 0; i < name1.length; i++) {
            var charname = charname1.charAt(i);
            if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) {
                div.innerHTML = "姓名包含非法字母，只能包含字母，数字，和下划线";
                div.style.color="red";
              //  document.form1.user1.select();
                return false;
            }
        }
        return true;

    }
    function checkpassword(){
        var div = document.getElementById("div2");
        div.innerHTML = "";
        var password = document.form1.userpassword.value;
        if (password == "") {
            div.innerHTML = "密码不位空！";
            div.style.color="red";
           // document.form1.pass1.focus();
            return false;
        }
        if (password.length < 6 || password.length > 16) {
            div.innerHTML = "密码长度6-16位";
            div.style.color="red";
           // document.form1.pass1.select();
            return false;
        }
        /*   if(/[0-9]{6,16}/.test(password)){
               div.innerHTML = "密码安全性弱";
               div.style.color="red"
               document.form1.pass1.select();
               return false;
           }
           if(/[0-9a-z]{6,16}/.test(password)){
               div.innerHTML = "密码安全性中";
               div.style.color="blue"
               document.form1.pass1.select();
               return false;
           }*/

        return true;
    }

    function checkrepassword(){
        var div = document.getElementById("div3");
        div.innerHTML = "";
        var password = document.form1.userpassword.value;
        var repass = document.form1.reuserpassword.value;
        if (repass == "") {
            div.innerHTML = "确认密码不位空！";
            div.style.color="red";
           // document.form1.pass2.focus();
            return false;
        }
        if (password != repass) {
            div.innerHTML = "输入密码和确认密码不一致";
            div.style.color="red";
          //  document.form1.pass2.select();
            return false;
        }
        return true;
    }

    function check(){
        if (checkname() && checkpassword() && checkrepassword() ) {
            return true;
        }
        else {
            return false;
        }
    }
</script>
</body>
</html>
